<template>
    <div class="news-view hacker-news-list has-header">
        <div class="hacker-news-header">
            <a href="http://www.ycombinator.com" target="_blank">
                <img src="https://news.ycombinator.com/y18.gif" alt="">
            </a>
            <span>Hacker News</span>
            <select v-model="tag" @change="changeFilter">
                <option value="story">Story</option>
                <option value="poll">Poll</option>
                <option value="show_hn">Show hn</option>
                <option value="ask_hn">Ask hn</option>
                <option value="front_page">Front page</option>
            </select>
        </div>
        <div class="hacker-news-item" v-for="(item,key) in list" :key="key">
            <span class="num" v-text="key+1"></span>
            <p class="title">
                <a href="item.url" target="_self" v-text="item.title"></a>
            </p>
            <p>
                <small>
                    <span v-text="item.points"></span>
                    points by
                    <a target="_self" :href="'https://news.ycombinator.com/user?id=' + item.author"
                    v-text="item.author"></a>
                    |
                    <a target="_self" :href="'https://news.ycombinator.com/item?id=' + item.objectID"
                    v-text="item.num_comments + ' comments'"></a>
                </small>
            </p>
        </div>
        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            <span slot="no-more">
                There is no more Hacker News :(
            </span>
        </infinite-loading>
    </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';

const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story';


export default {
    name: 'news-view',
    data(){
        return {
            list: [],
            tag: 'story'
        }
    },
    components: {
        InfiniteLoading
    },
    methods: {
        infiniteHandler($state) {
            axios.get(api, {
                params: {
                    tags: this.tag,
                    page: this.list.length / 20 + 1,
                },
            }).then(({data}) => {
                if(data.hits.length) {
                    this.list = this.list.concat(data.hits); 
                    $state.loaded();
                    if(this.list.length / 20 === 10) {
                        $state.complete();
                    }
                } else {
                    $state.complete();
                }
            });
        },
        changeFilter(){
            this.list = [];
            this.$nextTick(() => {
                this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .hacker-news-header {
        background: orangered;
        height: 26px;
        line-height: 26px;
        span {
            color: #000;
            font-weight: bold;
        }
    }

    .hacker-news-item {
        margin-left: 1.8rem;
        padding: 1rem 1rem 0 0;
        overflow: hidden;
        position: relative;
        padding-left: 2rem;
        color: #999;
        a {
            color: inherit;
        }
        .num {
            position: absolute;
            text-align: right;
            left: 0;
            top: 1.2rem;
            &::after{
                content: '.'
            }
        }
        p {
            margin: 0;
           
           &:first-of-type {
               font-size: 1.5rem;
               color: #333;
           }
        }
    }
</style>

